<template>
  <el-popover placement="right" width="400" trigger="click" title="选择资源">
    <div style="height:300px">
      <el-scrollbar>
      <resource-tree ref="tree" @node-click="handleNodeClick" />
      </el-scrollbar>
      </div>
    <el-input slot="reference" v-model="pidName" :readonly="true"></el-input>
  </el-popover>
</template>
<script>
  import ResourceTree from './resourceTree';
  export default {
    components: {
      ResourceTree
    },
    props: {
      value: {
        type: Number,
      }
    },
    data() {
      return {
        isMounted: false
      }
    },
    computed: {
      pidName() {
        if (this.isMounted) {
          return this.$refs.tree.getNameById(this.value);
        }
      }
    },
    methods: {
      handleNodeClick(data) {
        this.$emit('input', data.id);
      },
    },
    mounted() {
      this.isMounted = true;
    }
  }
</script>
